import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "@/components/ui/card";
import FormAssembly from "@/components/form-assembly";
import {format} from "date-fns";
import {Button} from "@/components/ui/button";
import {EXPERIENCE, OTHERS} from "@/lib/constants";
import {Collapsible, CollapsibleContent, CollapsibleTrigger} from "@/components/ui/collapsible";
import {ChevronsUpDown, CirclePlus, GripVertical} from "lucide-react";
import {Separator} from "@/components/ui/separator";
import {cn} from "@/lib/utils";

const Experience = ({data, pIndex, detailData, setDetailData}: any) => {
    const module = EXPERIENCE[data?.type]

    // 修改值
    const handleValueChange = (index: number, key: string, value: string) => {
        const res = [...detailData]
        res[pIndex].value[index][key] = value
        setDetailData(res)
    }

    // 添加
    const handleAddItem = () => {
        const obj = Object.keys(module).reduce((acc: any, cur: string) => {
            return {
                ...acc,
                [cur]: ''
            }
        }, {})
        const detailRes = [...detailData]
        detailRes[pIndex].value = [...data?.value, obj]
        setDetailData(detailRes)
    }

    return (
        <Card className={'border-none shadow-sm rounded-none'}>
            <CardHeader>
                <div className={'flex justify-between items-center'}>
                    <div className={'flex justify-center items-center'}>
                        <Button className={'w-8 h-8 mr-1'} variant="ghost" size="icon">
                            <GripVertical size={16}/>
                        </Button>
                        <CardTitle>
                            {data?.title}
                        </CardTitle>
                    </div>
                </div>
            </CardHeader>
            {(data?.value && data?.value?.length > 0) &&
                <CardContent className={'space-y-4'}>
                    {data?.value?.map((item: any, index: number) => (
                        <Collapsible className={'border shadow-sm rounded-md'}>
                            <div className={'flex'}>
                                <div>
                                    <Button className={"w-8 h-full rounded-none p-0"} variant={'ghost'}>
                                        <GripVertical size={16}/>
                                    </Button>
                                </div>
                                <div className={'w-full flex justify-between items-center p-4 pl-2'}>
                                    <div className={'flex justify-center'}>
                                        <div className={'flex flex-col space-y-2'}>
                                            <div>
                                                {item?.name || `未填写${module?.name?.label}`}
                                            </div>
                                            <div className={'flex text-sm text-gray-400'}>
                                                <div>{item?.position || `未填写${module?.position?.label}`}</div>
                                                <div className={'mx-2'}>|</div>
                                                <div>
                                                    {(item?.startTime && item?.endTime) ?
                                                        `${format(item?.startTime, "yyyy-LL")} - ${format(item?.startTime, "yyyy-LL")}`
                                                        :
                                                        "未填写时间"
                                                    }
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <CollapsibleTrigger>
                                        <Button className={'w-8 h-8'} variant="ghost" size="icon">
                                            <ChevronsUpDown size={16}/>
                                        </Button>
                                    </CollapsibleTrigger>
                                </div>
                            </div>
                            <CollapsibleContent>
                                <Separator/>
                                <div className={'grid grid-cols-2 gap-4 p-4'}>
                                    {Object.keys(module).map((key: string) => (
                                        <FormAssembly
                                            value={item[key]}
                                            {...module[key]}
                                            change={(value: any) => {
                                                handleValueChange(index, key, value)
                                            }}
                                            key={key}
                                        />
                                    ))}
                                </div>
                            </CollapsibleContent>
                        </Collapsible>
                    ))}
                </CardContent>
            }
            <CardFooter className={'flex justify-end'}>
                <Button
                    className={cn({
                        'w-full': !(data?.value && data?.value?.length > 0),
                    })}
                    onClick={() => handleAddItem()}
                    variant={'outline'}
                >
                    <CirclePlus size={16} className={"mr-2"}/>
                    添加{data?.title}
                </Button>
            </CardFooter>
        </Card>
    )
}

export default Experience;